import HighLight from 'highlight.js'
import 'highlight.js/styles/github-dark.css'
import type { App, DirectiveBinding } from 'vue'

export default {
  install: (app: App) => {
    app.directive('highlight', {
      beforeMount(el, binding: DirectiveBinding) {
        const code = el.querySelectorAll('pre code')
        code.forEach((item: HTMLElement) => {
          if (typeof binding.value === 'string') {
            item.textContent = binding.value
          }
          HighLight.highlightBlock(item)
        })
      }
    })
  }
}
